<template>
    <div class="streaming">
        <div class="box">
            <div class="SearchResult-content" v-for="(item,index) in arr" :key="index" @click="anchor(item.roomId)">
                <div class="SearchResultAnchor">
                    <div class="SearchResultAnchor-anchor">
                        <div class="SearchResultAnchorItem" >
                            <div class="SearchResultAnchorItem-icon">
                                <img :src="item.avatar" alt="">
                            </div>
                            <div class="SearchResultAnchorItem-info">
                                <div class="SearchResultAnchorItem-infoNickname">{{item.nickname}}</div>
                                <div class="SearchResultAnchorItem-infoHot">
                                    <span class="SearchResultAnchorItem-infoHotText">
                                        "{{item.hn}}"
                                    </span>
                                    关注人数：
                                    "{{item.follow}}"
                                </div>
                            </div>
                            <div class="SearchResultAnchorItem-live"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'streaming',
        data() {
            return {
                arr: [],
                num: [],
                zive: ''
            }
        },
        created() {
            this.num = this.$route.query.index
            this.zive = encodeURI(this.$route.query.zive)
            this.send(this.zive, this.num)
        },
        methods: {
            anchor(rid){
                this.$router.push({
                    path: '/detlete',
                    query: {
                        rid: rid
                    }
                })
            },
            send(zive, num) {
                this.$http.get(`/api/search/getData?sk=${zive}&type=${num}&sort=1&limit=20&offset=0`).then(res => {
                    this.arr = res.data.data.anchor
                })
            }
        },

        
    }
</script>
<style scoped>
    .SearchResult-content {
    
        width: 100%;
        -webkit-overflow-scrolling: touch;
        background: #fff;
    }

    .SearchResultAnchor {

        width: 100%;
        padding-bottom: 10px;
        background: #fff;

    }

    .SearchResultAnchor-anchor {
        width: 100%;
        background: #fff;
    }

    .SearchResultAnchorItem {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -moz-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0 10px;
        border: 1px solid #eee;
        width: 100%;
        height: 70px;
        overflow: hidden;
    }

    .SearchResultAnchorItem-icon {
        -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        width: 50px;
        height: 50px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        margin-right: 10px;
        overflow: hidden;
    }

    .SearchResultAnchorItem-icon img {
        width: 100%;
        height: 100%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }

    .SearchResultAnchorItem-info {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -moz-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -moz-box-orient: vertical;
        -moz-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        overflow: hidden;
    }

    .SearchResultAnchorItem-infoNickname {
        width: 100%;
        height: 16px;
        line-height: 16px;
        font-size: 14px;
        color: #333;
        overflow: hidden;
        white-space: nowrap;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    .SearchResultAnchorItem-infoHot {
        margin-top: 5px;
        width: 100%;
        height: 16px;
        line-height: 16px;
        font-size: 13px;
        color: #999;
        overflow: hidden;
        white-space: nowrap;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis
    }

    .SearchResultAnchorItem-infoHotText {
        margin-right: 10px;
    }

    .SearchResultAnchorItem-live {
        -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        margin-left: 10px;
        width: 59px;
        height: 12px;
        background: url(https://shark2.douyucdn.cn/front-publish/m-douyu-v3-master/assets/images/belive_7e2b0eb.png) no-repeat;
        -webkit-background-size: 100% 100%;
        -moz-background-size: 100% 100%;
        background-size: 100% 100%;
    }
</style>